<template>
    <el-dialog v-model="dialogVisible" title="插入停顿" width="50%">
      <el-row :gutter="20">
        <!-- 第1行 -->
        <el-col :span="12">
          <el-button @click="pauseTime='0ms';inputTextFocus=false;" type="plain">无停顿</el-button>
        </el-col>
        <el-col :span="6">
          <el-button @click="pauseTime='100ms';inputTextFocus=false;" type="plain">100ms</el-button>
        </el-col>
        <el-col :span="6">
          <el-button @click="pauseTime='150ms';inputTextFocus=false;" type="plain">150ms</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20"> 
        <!-- 第2行 -->
        <el-col :span="6">
          <el-button @click="pauseTime='200ms';inputTextFocus=false;" type="plain">200ms</el-button>
        </el-col>
        <el-col :span="6">
          <el-button @click="pauseTime='300ms';inputTextFocus=false;" type="plain">300ms</el-button>
        </el-col>
        <el-col :span="6">
          <el-button @click="pauseTime='400ms';inputTextFocus=false;" type="plain">400ms</el-button>
        </el-col>
        <el-col :span="6">
          <el-button @click="pauseTime='600ms';inputTextFocus=false;"type="plain">600ms</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <!-- 第3行 -->
        <el-col :span="12">
        <el-input 
          v-model="inputTextTime" 
          placeholder="请输入内容" 
          @focus="handleFocus" 
          @input="handleInput"
          type="number" 
            min="0"
        ></el-input>
        </el-col>
      </el-row>
      <template #footer>
        <el-row :gutter="20">
        <!-- 第1行 -->
        <el-col :span="12">

        </el-col>
        <el-col :span="6">
            <el-button @click="closeDialog">取消</el-button>
        </el-col>
        <el-col :span="6">
            <el-button type="primary" @click="handleConfirm">确定</el-button>
        </el-col>
      </el-row>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts">
  export default {
    name: 'InsertPause'
  }
  </script>

  <script setup lang="ts">
  import { ref, defineProps, defineEmits, defineExpose ,onMounted} from 'vue';
  import { ElDialog, ElRow, ElCol, ElButton, ElInput,ElMessage } from 'element-plus';

  // 停顿时间文本
  const pauseTime = ref('');

  // 文本框录入的时间文本
  const inputTextTime = ref('');

  // 获取焦点
  const inputTextFocus=ref(false);
 
  // 定义 emits
  const emit = defineEmits(['Completed']);
  
  // 控制对话框显示不显示
  const dialogVisible = ref(false);
  

  // 关闭对话框
  const closeDialog = () => {
    dialogVisible.value = false;
  };
  
  const handleConfirm = () => {
    // 处理确定按钮点击事件
    if(inputTextFocus.value==true){
        if(inputTextTime.value=="" || inputTextTime.value==null || inputTextTime.value==undefined){
            ElMessage({
                message: '请录入暂停时间',
                type: 'warning',
            })
        }
        else{
            emit('Completed', '#!'+inputTextTime.value+'ms#');
            inputTextTime.value="";
            dialogVisible.value = false;
        }
    }
    else{
        // 没有录入文本框，使用按钮的默认值
        emit('Completed', '#!'+pauseTime.value+'#');
        inputTextTime.value="";
        dialogVisible.value = false;
    }


  };
  
  const handleFocus=()=>{
    pauseTime.value="";
    inputTextFocus.value=true;
  }

  // 处理输入框输入事件，只允许输入数字
const handleInput = (value: string) => {
  const regex = /^[0-9]*$/; // 只允许输入数字
  if (!regex.test(value)) {
    inputTextTime.value = value.replace(/[^\d]/g, ''); // 移除非数字字符
  }
};

  // 暴露 dialogVisible 以便外部控制
  defineExpose({
    dialogVisible
  });

  onMounted(() => {
    inputTextTime.value="";
  });

  </script>
  
  <style scoped>
  .el-row {
    margin-bottom: 10px;
  }
  .el-col {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  </style>